<template>
    <div>
        <Tabs value="collection" class="">
            <TabPane label="职位收藏" name="collection">
                <div class="w-100 d-flex-center flex-column">
                    <template v-for="item in positionList">
                        <div class="w-95 d-flex-between-center bor-base-b" style="height: 100px">
                            <!--内容部分-->
                            <div class="" style="height: 100px">
                                <div style="margin-bottom: 10px; margin-top: 10px">{{ item.jobTitle }}</div>
                                <div style="margin-bottom: 5px">
                                    <span style="color: #989898">{{ item.jobPay }}&nbsp|</span>
                                    <span style="color: #989898">&nbsp{{ item.educationalRequirements }}&nbsp|</span>
                                    <span style="color: #989898">&nbsp招聘{{ item.jobNumber }}人&nbsp|</span>
                                    <template v-for="major in item.majorRequirement">
                                        <span style="color: #989898">&nbsp{{ major }}</span>
                                    </template>
                                </div>
                                <div>
                                    <span style="color: #989898">收藏日期：{{ item.collectionDate }}</span>
                                </div>
                            </div>
                            <!--按钮部分-->
                            <div class="d-flex-between-center">
                                <div style="color: #1d8ce0; margin-right: 15px; cursor: pointer" @click="sendOneSResume">投递简历</div>
                                <div style="color: #1d8ce0; cursor: pointer" @click="collectionChange">取消收藏</div>
                            </div>
                        </div>
                    </template>
                </div>
                <!--        <div class="bor-base-t w-100 h-10 d-flex-align-center ">-->
                <!--          <Page  show-sizer :total="Number(positionList.length)" show-elevator />-->
                <!--        </div>-->
            </TabPane>
            <TabPane label="关注企业" name="attention">
                <div class="w-100 d-flex-center" style="flex-direction: column">
                    <div class="w-95 d-flex-between-center" v-for="item in companyList" style="border-bottom: 2px solid #eceff8; height: 100px">
                        <!--左边部分-->
                        <div>
                            <div style="margin-bottom: 10px; margin-top: 10px">{{ item.companyName }}</div>
                            <div style="margin-bottom: 5px">
                                <span style="color: #989898">{{ item.industryType }}&nbsp|</span>
                                <span style="color: #989898">&nbsp{{ item.companyLocation }}&nbsp|</span>
                                <span style="color: #989898">&nbsp{{ item.enterpriseCategory }}&nbsp|</span>
                                <span style="color: #989898">&nbsp{{ item.numberOfEnterprises }}</span>
                            </div>
                            <div>
                                <span style="color: #989898">收藏日期：{{ item.dateOfAttention }}</span>
                            </div>
                        </div>
                        <!--中间-->
                        <div>
                            <template v-if="item.numberOfJobs <= 0">
                                <span>暂无职位</span>
                            </template>
                            <template v-else>
                                <span style="color: #ffb554; font-size: 24px">{{ item.numberOfJobs }}</span>
                                个职位
                            </template>
                        </div>
                        <!--按钮部分-->
                        <div class="d-flex-between-center">
                            <div style="color: #1d8ce0; margin-right: 15px; cursor: pointer" @click="viewBusiness">查看</div>
                            <div style="color: #1d8ce0; cursor: pointer" @click="unfollow">取消关注</div>
                        </div>
                    </div>
                    <!--          <Page :total="100" show-sizer />-->
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            positionList: [
                {
                    jobTitle: '项目运营（平台推广）',
                    jobPay: '6K-8K',
                    educationalRequirements: '本科及以上',
                    jobNumber: 1,
                    majorRequirement: ['教育学', '心理学', '统计学', '计算机'],
                    collectionDate: '2023-10-19 09:17'
                },
                {
                    jobTitle: '项目运营（平台推广）',
                    jobPay: '6K-8K',
                    educationalRequirements: '本科及以上',
                    jobNumber: 1,
                    majorRequirement: ['教育学', '心理学', '统计学', '计算机'],
                    collectionDate: '2023-10-19 09:17'
                },
                {
                    jobTitle: '项目运营（平台推广）',
                    jobPay: '6K-8K',
                    educationalRequirements: '本科及以上',
                    jobNumber: 1,
                    majorRequirement: ['教育学', '心理学', '统计学', '计算机'],
                    collectionDate: '2023-10-19 09:17'
                }
            ],
            companyList: [
                {
                    companyName: '浙江国邦药业有限公司',
                    industryType: '制药/医疗',
                    companyLocation: '浙江-绍兴',
                    enterpriseCategory: '民营企业',
                    numberOfEnterprises: '1000-5000人',
                    dateOfAttention: '2023-10-19 09:17',
                    numberOfJobs: 0
                },
                {
                    companyName: '浙江国邦药业有限公司',
                    industryType: '制药/医疗',
                    companyLocation: '浙江-绍兴',
                    enterpriseCategory: '民营企业',
                    numberOfEnterprises: '1000-5000人',
                    dateOfAttention: '2023-10-19 09:17',
                    numberOfJobs: 10
                },
                {
                    companyName: '浙江国邦药业有限公司',
                    industryType: '制药/医疗',
                    companyLocation: '浙江-绍兴',
                    enterpriseCategory: '民营企业',
                    numberOfEnterprises: '1000-5000人',
                    dateOfAttention: '2023-10-19 09:17',
                    numberOfJobs: 20
                }
            ],
            isCollection: true
        };
    },
    methods: {
        // region TODO 取消收藏
        collectionChange() {
            if (this.isCollection) {
                console.log('调用取消收藏接口');
                this.isCollection = false;
            }
        },
        // endregion
        // region TODO 投递简历
        sendOneSResume() {
            console.log('投递简历');
        },
        // endregion
        // region TODO 查看企业
        viewBusiness() {
            console.log('查看企业');
        },
        // endregion
        unfollow() {
            console.log('取消关注');
        }
    }
};
</script>
<style scoped>
.ivu-tabs-nav {
    border: none;
    color: #989898;
    background-color: #fff0f3;
}
.ivu-tabs-ink-bar {
    background-color: #1496f3;
}
.ivu-tabs-nav .ivu-tabs-tab-active {
    color: black;
}
</style>
